<template>
    <div class='article-lists'>
        <el-card class='!border-none' shadow='never'>
            <el-form ref='formRef' class='mb-[-16px]' :model='queryParams' :inline='true'>
                <el-form-item label='文章标题'>
                    <el-input
                        class='w-[280px]'
                        v-model='queryParams.title'
                        clearable
                        @keyup.enter='resetPage'
                    />
                </el-form-item>
                <el-form-item label='栏目名称'>
                    <el-select class='w-[168px]' v-model='queryParams.cid'>
                        <el-option label='全部' value />
                        <el-option
                            v-for='item in optionsData.article_cate'
                            :key='item.id'
                            :label='item.name'
                            :value='item.id'
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label='文章状态'>
                    <el-select class='w-[168px]' v-model='queryParams.is_show'>
                        <el-option label='全部' value />
                        <el-option label='显示' :value='1' />
                        <el-option label='隐藏' :value='0' />
                    </el-select>
                </el-form-item>
                <el-form-item label='地区' prop='city_id'>
                    <el-cascader style='width:280px;' v-model='queryParams.city_id' :options='cityDataOption' />
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' @click='resetPage'>查询</el-button>
                    <el-button @click='resetParams'>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class='!border-none mt-4' shadow='never'>
            <div>
                <router-link
                    v-perms="['article.article/add', 'article.article/add:edit']"
                    :to="{
                        path: getRoutePath('article.article/add:edit')
                    }"
                >
                    <el-button type='primary' class='mb-4'>
                        <template #icon>
                            <icon name='el-icon-Plus' />
                        </template>
                        发布文章
                    </el-button>
                </router-link>
            </div>
            <el-table size='large' v-loading='pager.loading' :data='pager.lists'>
                <el-table-column label='ID' prop='id' min-width='80' />
                <el-table-column label='封面' min-width='100'>
                    <template #default='{ row }'>
                        <image-contain
                            v-if='row.image'
                            :src='row.image'
                            :width='60'
                            :height='45'
                            :preview-src-list='[row.image]'
                            preview-teleported
                            fit='contain'
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label='标题'
                    prop='title'
                    min-width='160'
                    show-tooltip-when-overflow
                />
                <el-table-column label='栏目' prop='cate_name' min-width='100' />
                <el-table-column label='作者' prop='author' min-width='120' />
                <el-table-column label='文章类型' prop='type' min-width='120'>
                    <template #default='{ row }'>
                        <el-tag v-if='row.type==1'>文本</el-tag>
                        <el-tag type='danger' v-else-if='row.type==2'>图文</el-tag>
                        <el-tag type='danger' v-else='row.type'>视频</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label='浏览量' prop='click' min-width='100' />
                <el-table-column label='状态' min-width='100'>
                    <template #default='{ row }'>
                        <el-switch
                            v-perms="['article.article/updateStatus']"
                            v-model='row.is_show'
                            :active-value='1'
                            :inactive-value='0'
                            @change='changeStatus($event, row.id)'
                        />
                    </template>
                </el-table-column>
                <el-table-column label='排序' prop='sort' min-width='100' />
                <el-table-column label='发布时间' prop='create_time' min-width='120' />
                <el-table-column label='操作' width='120' fixed='right'>
                    <template #default='{ row }'>
                        <el-button
                            v-perms="['article.article/edit', 'article.article/add:edit']"
                            type='primary'
                            link
                        >
                            <router-link
                                :to="{
                                    path: getRoutePath('article.article/add:edit'),
                                    query: {
                                        id: row.id
                                    }
                                }"
                            >
                                编辑
                            </router-link>
                        </el-button>
                        <el-button
                            v-perms="['article.article/delete']"
                            type='danger'
                            link
                            @click='handleDelete(row.id)'
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class='flex justify-end mt-4'>
                <pagination v-model='pager' @change='getLists' />
            </div>
        </el-card>
    </div>
</template>
<script lang='ts' setup name='articleLists'>
import { articleLists, articleDelete, articleStatus, articleCateAll, getCityNew } from '@/api/article'
import { useDictOptions } from '@/hooks/useDictOptions'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'

const queryParams = reactive({
    title: '',
    cid: '',
    is_show: '',
    city_id: ''
})
const cityDataOption = ref([])
initCityDataOption()
async function initCityDataOption() {
    const resp = await getCityNew({})
    if (!resp || !resp.length) return

    function patchMap(v: any) {
        if (!v.hasOwnProperty('children')) return
        if (!v.children || !v.children.length) return
        return v.children.map((item: any) => {
            const { id, name } = item
            const data = {
                value: id, label: name
            }
            const children = patchMap(item)
            if (children) data.children = children
            return data
        })
    }

    cityDataOption.value = resp.map((item: any) => {
        const { id, name } = item
        return {
            label: name, value: id, children: patchMap(item)
        }
    })
}


const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: articleLists,
    params: queryParams
})

const { optionsData } = useDictOptions<{
    article_cate: any[]
}>({
    article_cate: {
        api: articleCateAll
    }
})

const changeStatus = async (is_show: any, id: number) => {
    try {
        await articleStatus({ id, is_show })
        getLists()
    } catch (error) {
        getLists()
    }
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await articleDelete({ id })
    getLists()
}

onActivated(() => {
    getLists()
})

getLists()
</script>
